import React from 'react'
import '../../style/personalsonglistDeleteWindow.css'

const FavorsonglistDelete = ({ songlistId, ondelwindowVisibleChange }) => {
  const deleteclick = async () => {
    try {
      const response = await fetch(`http://localhost:8088/favlist/${songlistId}`, {
        method: "DELETE",
        headers: {
          "Content-Type": "application/json",
        },
      })
      if (!response.ok) {
        throw new Error('Failed to delete');
      }
      // else {
      //   alert('删除成功！');
      // }
    } catch (error) {
      console.error("Error delete: ", error);
    }
    ondelwindowVisibleChange(false);
  }
  return (
    <div className='delpersonlis'>
      <div className='deltop'>
        <i className='ri-error-warning-line'></i>
        <div className='delinfo'>
          <p>删除后不可恢复</p>
          <p>您确认要删除吗？</p>
        </div>
      </div>
      <div className="delControll">
        <button onClick={deleteclick}>删除</button>
        <button onClick={() => ondelwindowVisibleChange(false)}>取消</button>
      </div>
    </div>
  )
}

export default FavorsonglistDelete